<template>
  <el-card class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-suffix=":">
      <el-form-item label="基本服务名称" prop="serviceName">
        <el-input v-model="form.serviceName" placeholder="基本服务名称" />
      </el-form-item>
      <el-form-item label="基本服务描述" prop="serviceDescription">
        <tinymce v-model="form.serviceDescription" :height="300" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="$router.go(-1)">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import Tinymce from '@/components/Tinymce'

export default {
  name: "ServiceManageDetail",
  components: {
    Tinymce
  },
  data() {
    return {
      form: {
        serviceName: null,
        serviceDescription: null
      },
      rules: {
        serviceName: [{ required: true, message: "请输入基本服务名称", trigger: "blur" }]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.API.addOrUpdateAssistBasicService({ body: this.form }).then(res => {
            this.success("提交成功!");
            this.$refs["form"].resetFields();
            this.$router.go(-1)
          }).catch(err => this.warning(err))
        } else {
          return false;
        }
      })
    },
    addPicture(val, field) {
      this.form[field] = val;
    },
    delPicture(field) {
      this.form[field] = null;
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.API.getAssistBasicServiceById({ id: this.$route.query.id }).then(ret => {
        for (let key in this.form) {
          if (key === 'cid') this.form[key] = ret.data.assistCategoryId
          else this.form[key] = ret.data[key]
        }
        this.form.id = ret.data.id
      });
    }
  }
}
</script>
<style scoped lang="scss">
  .app-container {
    padding-top: 20px;
    padding-right: 50px;

    .el-input {
      width: 400px;
    }

    .el-select {
      width: 300px;
    }
  }
</style>
